import { AimOutlined, CalendarOutlined, TagsOutlined } from "@ant-design/icons";
import { Pagination } from "antd";
import { articleListApi } from "apis";
import { PubSub } from "pubsub-js";
import { Component } from "react";
import { Link } from "react-router-dom";
import "./index.css";
import CardImg from "./page.png";

//列表 卡片组件
export default class List extends Component {
	state = {
		articles: [],
		queryData: {},
		page: 1,
		pageSize: 5,
	};
	componentDidMount() {
		this.getArticleList(this.state.page, this.state.pageSize);

		// 订阅消息
		this.pubsub_token = PubSub.subscribe(
			"Update_CardList",
			function (_) {
				this.getArticleList(this.state.page, this.state.pageSize);
			}.bind(this),
		);

		this.pubsub_token = PubSub.subscribe("Update_Search");
	}

	componentWillUnmount() {
		// 销毁订阅
		PubSub.unsubscribe(this.pubsub_token);
	}

	// 获取文章列表
	getArticleList(page, pageSize) {
		const _this = this;
		articleListApi({
			page: page,
			page_size: pageSize,
			query: {
				text: this.props.match.params.text,
			},
		}).then(function (res) {
			_this.setState({
				// 手动切割，防止接口返回过多
				articles: res.data.articles.slice(0, _this.state.pageSize),
				total: res.data.total,
			});
			// 回到顶部
			document.documentElement.scrollTop = 500;
		});
	}

	// 分页跳转
	pageChange(page, pageSize) {
		this.getArticleList(page, pageSize);
	}

	// 查询类目
	searchCategory(id, name) {
		const _this = this;
		articleListApi({
			query: {
				category_id: id,
			},
		}).then(function (res) {
			_this.setState({
				articles: res.data.articles.slice(0, _this.state.pageSize),
				total: res.data.total,
			});
			// 发布消息
			PubSub.publish("Update_HeaderTitle", name);
		});
	}

	render() {
		console.log(this.state.articles);
		return (
			<div>
				<div className="card-list">
					{this.state.articles.map((article, i) => {
						return (
							<div className="card" key={i}>
								<div className="card-img">
									<Link
										to={`/article/one/${article.id}`}
										onClick={() => {
											PubSub.publish("Update_HeaderTitle", article.title);
										}}
									>
										<img alt="1" src={CardImg}></img>
									</Link>
								</div>
								<div className="card-content">
									<div className="card-info">
										<h1>{article.title}</h1>
										<p>{article.description}</p>
									</div>
									<div className="card-meta-group">
										<div
											className="card-meta"
											onClick={this.searchCategory.bind(
												this,
												article.category.id,
												article.category.name,
											)}
										>
											<TagsOutlined />
											{article.category.name}
										</div>
										<div className="card-meta">
											<CalendarOutlined />
											{article.updated_at.split("T")[0]}
										</div>
										<div className="card-meta">
											<AimOutlined />
											{article.traffic}
										</div>
									</div>
								</div>
							</div>
						);
					})}
				</div>
				<div className="card-list-pagination ">
					<Pagination
						showSizeChanger
						defaultCurrent={1}
						defaultPageSize={this.state.pageSize}
						total={this.state.total}
						pageSizeOptions={[5, 15, 20]}
						showQuickJumper={true}
						onChange={this.pageChange.bind(this)}
					/>
				</div>
			</div>
		);
	}
}
